<template>
  <div class="description">
    <div v-if="timeStr"  class="head-text box box-ver box-ac box-jc tx-c animated fadeIn">
      <img class="result-title" :src="require('../assets/images/result-title.png')">
      <div>请耐心等候，{{timeStr}}将会</div>
      <div>显示在长沙IFS L7的</div>
      <div>户外喷水屏中。</div>
    </div>
    <div class="text2 animated fadeIn">
      根据你的样子分析，我们已经为你准
      <br>备长沙IFS行程，看看是否你喜欢？
    </div>
    <img @click="next()" class="result-button1 animated pulse infinite" :src="require('../assets/images/result-button1.png')" alt="">
    <div class="bottom animated fadeInUp">
      <div class="trapezoid1"></div>
      <div class="trapezoid2"></div>
      <div ref="screen" class="screen">
        <div class="desc">
          <img class="title" :src="require('../assets/images/result-title1.png')" alt="">
          <div class="text box text1 animated slideInLeft">性别：{{faceObj.gender}}</div>
          <div class="text box text2 animated slideInLeft">年龄：{{faceObj.age}}</div>
          <div class="text box text3 animated slideInLeft">表情：{{faceObj.expression}}</div>
          <div class="text box text4 animated slideInLeft">魅力：{{faceObj.beauty}}</div>
        </div>
        <div class="face-content w-p100 h-p100">
          <img class="face" :src="styleBase64" alt="">
          <img class="sticker"
            :style="{
              width: item.w,
              'z-index': item.zIndex,
              '-webkit-transform': `translate3d(${item.translateObj.x}px, ${item.translateObj.y}px, 0) scale(${item.translateObj.scale}) rotate(${item.translateObj.rotate}deg)`
            }"
            :src="item.img"
            v-for="(item, index) in stickerList" :value="item" :key="index" alt="">
        </div>

      </div>
    </div>
    <cloud></cloud>
    <!-- <img @click="showShare = true" class="result-button2 animated pulse infinite" :src="require('../assets/images/result-button2.png')" alt="">
    <div @click="showShare = false" v-if="showShare" class="share animated fadeIn">
      <img class="share-tip" :src="require('../assets/images/share-tip.png')" alt="">
    </div> -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import cloud from '@/components/cloud'
export default {
  name: 'result',
  components: {
    cloud
  },
  computed: {
    ...mapState(['screenObj', 'activityGuid', 'userInfo', 'styleBase64', 'face'])
  },
  data () {
    return {
      showShare: false,
      stickerList: [],
      faceObj: {},
      timeStr: ''
    }
  },
  mounted () {
    this.getWaitNum()
    this.initFace()
    this.initStickerList()
  },
  methods: {
    initFace () {
      // console.log('this.face>>>', this.face)
      let { gender, age, expression, beauty } = this.face
      this.faceObj.gender = gender < 50 ? '女' : '男'
      this.faceObj.age = age
      this.faceObj.beauty = beauty + '%'
      let Arr = [
        '出水芙蓉',
        '出水芙蓉',
        '半瞋半喜',
        '笑颜逐开',
        '眉笑颜开',
        '喜上眉梢',
        '一笑倾城',
        '心花怒放',
        '喜气洋洋',
        '神采飞扬',
        '神采飞扬'
      ]
      this.faceObj.expression = Arr[Math.floor(expression / 10)]
      this.$forceUpdate()
    },
    getWaitNum () {
      this.$http({
        url: `${this.$config.baseUrl}/api/api?ifname=ledscreen.user.data.wait`,
        method: 'post',
        data: {
          activity_guid: this.activityGuid,
          openid: this.userInfo.openid
        }
      }).then(res => {
        if (+res.status === 1) {
          if (res.data.num > 1) {
            this.timeStr = `${res.data.num / 2}分钟`
          } else {
            this.timeStr = '30秒后'
          }
        }
      })
    },
    initStickerList () {
      let $screen = this.$refs.screen
      this.sW = $screen.clientWidth
      let zoom = this.$refs.screen.clientWidth / this.screenObj.sW
      console.log(this.screenObj)
      this.screenObj.stickerList.forEach(item => {
        let { x, y, scale, rotate } = item.translateObj
        this.stickerList.push({
          img: item.img,
          w: item.w,
          zIndex: item.zIndex,
          translateObj: {
            x: zoom * x,
            y: zoom * y,
            scale,
            rotate
          }
        })
      })
    },
    next () {
      this.$router.push({
        path: '/recommend'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.description{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.share{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  bottom:0;
  z-index:5;
  background-color:rgba(0, 0, 0, .7);
  .share-tip{
    width:5rem;
    display:block;
    position:absolute;
    right:.5rem;
    top:.3rem;
  }
}
.head-text{
  width:5.7rem;
  height:2.4rem;
  border-radius:.2rem;
  color:#e782ff;
  font-size:.36rem;
  font-weight:500;
  line-height:.4rem;
  margin:.6rem auto;
  margin-bottom:0;
  background-color:rgba(255,255,255,.5);
  .result-title{
    width:2.4rem;
    margin-bottom:.2rem;
  }
}
.text2{
  font-size:.36rem;
  font-weight:500;
  padding:.2rem;
  text-align: center;
  color:#FFF;
  animation-delay: 3.8s;
}
.result-button1{
  position:relative;
  display:block;
  margin:0 auto;
  width:2.9rem;
  z-index:2;
  animation-delay: 3.8s;
}
.result-button2{
  position:absolute;
  bottom:.66rem;
  left:50%;
  // transform:translateX(-50%);
  margin-left:-1.84rem;
  width:3.68rem;
  height:.68rem;
  z-index:2;
  animation-delay: 4.2s;
}

.bottom{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2rem;
  z-index:1;
  background-color:#56d1c8;
  animation-delay: 1s;
}
.trapezoid1{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  width:2.4rem;
  height:0;
  border-width:0 1.5rem 2.2rem 1.5rem;
  border-style:none solid solid;
  border-color:transparent transparent #ffe869;
}
.trapezoid2{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  height:0;
  width:2rem;
  border-width:0 .66rem 1rem .66rem;
  // border-width:0 1rem 1.8rem 1rem;
  border-style:none solid solid;
  border-color:transparent transparent #ffab6c;
}
// 312*648
.screen{
  position:absolute;
  z-index:1;
  bottom:1.7rem;
  left:50%;
  transform: translateX(-50%);
  border:.1rem solid #FFF;
  width:2.1rem;
  height:4.362rem;
  .desc{
    position:absolute;
    width:2.5rem;
    right:-2.6rem;
    overflow:hidden;
    .title{
      margin: 0 .2rem;
      width:2rem;
    }
    .text{
      width:auto;
      margin-top:.3rem;
      font-size:.3rem;
      padding:.05rem .1rem;
      border-top-right-radius: .4rem;
      border-bottom-right-radius: .4rem;
      color:#FFF;
    }
    .text1{
      width:1.4rem;
      background-color:#e782ff;
      animation-delay: .2s;
    }
    .text2{
      width:1.6rem;
      background-color:#ffe869;
      animation-delay: .8s;
    }
    .text3{
      background-color:#facc74;
      animation-delay: 1.4s;
    }
    .text4{
      width:1.9rem;
      background-color:#56d1c8;
      animation-delay: 2s;
    }
  }
  .face-content{
    position:relative;
    overflow:hidden;
    .face{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
    .sticker{
      position:absolute;
    }
  }
}
</style>
